<template>
  <div class="dashboard-container">
    <div class="app-container">
      <el-card shadow="never">
        <el-form>
        <el-row type="flex" justify="space-between" align="middle" style="height:50px">
          <el-form-item label-width="90px" label="关键字" size="small">
            <el-input
              placeholder="根据编号搜索"
              v-model.trim="data.keyword"
              @keydown.enter.native="handleSearch"
              style="width: 200px"
            ></el-input>
          </el-form-item>
          <el-form-item>
            <el-col type="flex" justify="end">
              <el-button size="small" @click="clear">清除</el-button>
              <el-button type="primary" size="small" @click="handleSearch">搜索</el-button>
            </el-col>
          </el-form-item>
        </el-row>
      </el-form>
        <!-- 文字 -->
        <div class="el-alert" style="margin-bottom: 15px;">
          <i class="el-icon-info" style="margin-right:10px;" />
          <span style="font-size:13px;">数据一共{{ total }}条</span>
        </div>
        <!-- 表格 -->
      <!-- <el-card> -->
        <!-- header-cell-style 表头样式 -->
        <el-table
          :data="list"
          style="width: 100%"
          :header-cell-style="{background:'#fafafa',color:'#606266'}">
          <el-table-column
            prop="id"
            label="编号"
            width="200">
          </el-table-column>
          <el-table-column
            prop="questionType"
            label="题型"
            width="100">
            <template #default="{row}">
              {{ TypeEnum[row.questionType] }}
            </template>
          </el-table-column>
          <el-table-column
            prop="questionIDs"
            label="题目编号"
            width="200">
            <template #default="{row}">
              <div v-for="(item, index) in row.questionIDs" :key="index">
                <a href="#"
                style="color: rgb(0, 153, 255);"
                @click="showDialog(item.id)"
              >{{ item.number }}</a>
              </div>
            </template>
          </el-table-column>
          <el-table-column
            prop="addTime"
            label="录入时间"
            width="200">
          </el-table-column>
          <el-table-column
            prop="totalSeconds"
            label="答题时间(s)">
          </el-table-column>
          <el-table-column
            prop="accuracyRate"
            label="正确率(%)">
          </el-table-column>
          <el-table-column
            prop="userName"
            label="录入人">
          </el-table-column>
          <el-table-column
            width="80px;"
            label="操作"
            >
            <template #default="{row}">
              <el-button
              type="danger"
              icon="el-icon-delete"
              title="删除"
              plain
              circle
              size="small"
              @click="deleteRandoms(row)"
              >
              </el-button>
            </template>
          </el-table-column>
        </el-table>
        <!-- 分页器 -->
        <el-row type="flex" justify="end" align="middle" style="height:80px;">
          <el-pagination
          @current-change="handleCurrentChange"
          @size-change="handleSizeChange"
          background
          :current-page="data.page"
          :page-sizes="[20, 30, 50, 100]"
          :page-size="data.pagesize"
          layout="prev, pager, next, sizes, jumper"
          :total="total">
        </el-pagination>
        </el-row>
      <!-- </el-card> -->
      </el-card>
    </div>
    <!-- 题目预览 -->
    <el-dialog
      @close="closeDialog"
      title="题目预览"
      :visible="dialogVisible"
      width="60%"
      hight="60%">
      <el-row type="flex" justify="space-between">
        <el-col>【题型】:{{ TypeEnum[questionData.questionType] }}</el-col>
        <el-col>【编号】:{{ questionData.id }}</el-col>
        <el-col>【难度】:{{ Difficulty[questionData.difficulty]}}</el-col>
        <el-col>【标签】:{{ questionData.tags }}</el-col>
      </el-row>
      <el-row type="flex" style="margin-top: 20px">
        <el-col>【学科】:{{ questionData.subjectName }}</el-col>
        <el-col>【目录】:{{ questionData.directoryName }}</el-col>
        <el-col>【方向】:{{ questionData.direction }}</el-col>
        <el-col></el-col>
      </el-row>
      <el-divider></el-divider>
      <div>【题干】:</div>
      <!-- 题干 -->
      <div style="color: blue;">
        <p v-html="questionData.question"></p>
      </div>
      <div>
        <div style="padding-bottom: 5px;">{{TypeEnum[questionData.questionType]}} 选项：（以下选中的选项为正确答案）</div>
        <div class="radio" v-for="item in questionData.options" :key="item.code">
          <!-- 单选 -->
          <!-- 由于单选框只有一个isRight 判断相等 按钮选中 -->
          <el-radio
            @click.native="stopPrevent"
            v-if="TypeEnum[questionData.questionType] === '单选'"
            v-model="radio"
            :label="item.isRight"
            style="margin-top:10px"
            >
            {{item.title}}
          </el-radio>
          <!-- 多选 -->
          <el-checkbox
            style="margin-top:10px"
            @click.native="stopPrevent"
            v-model="checkBox"
            v-else-if="TypeEnum[questionData.questionType] === '多选'"
            :checked="item.isRight === 1"
            :label="item.code"
            >
            {{item.title}}
          </el-checkbox>
          <div v-else></div>
        </div>
      </div>

      <el-divider></el-divider>
      【参考答案】:  <el-button type="danger" size="small" @click="videoShow(questionData.videoURL)">视频答案预览</el-button>
      <div>
        <!-- muted-静音，controls-播放控件 ，autoplay-自动播放 ，loop-循环播放 -->
        <video
          style="width:300px"
          :src="questionData.videoURL"
          v-if="isShow"
          controls="controls" muted="muted"
        ></video>
      </div>
      <el-divider></el-divider>
      【答案解析】:
      <div style="display: inline-block">
        <p v-html="questionData.answer">{{questionData.answer}}</p>
      </div>
      <el-divider></el-divider>
      【题目备注】:{{questionData.remarks}}
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="closeDialog">关闭</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
// 组题列表/删除/基础题库详细
import { randoms, removeRandoms, detail } from '@/api/hmmm/questions.js'

export default {
  data () {
    return {
      list: [],
      data: {
        page: 1,
        pagesize: 20,
        keyword: ''
      },
      total: 0,
      // 定义题型枚举
      TypeEnum: {
        1: '单选',
        2: '多选',
        3: '简答'
      },
      // 难度枚举
      Difficulty: {
        1: '简单',
        2: '一般',
        3: '困难'
      },
      // 弹窗显示隐藏
      dialogVisible: false,
      questionData: {}, // 题目信息
      radio: 1, // 单选
      checkBox: [], // 多选
      // 控制视频的显示和隐藏
      isShow: false
    }
  },
  async created () {
    this.randoms()
  },
  methods: {
    // 获取列表数据
    async randoms () {
      const res = await randoms(this.data)
      // console.log(res)
      this.list = res.data.items
      this.total = res.data.counts
    },
    // 分页器渲染数据
    handleCurrentChange (newPage) {
      console.log(newPage)
      this.data.page = newPage
      this.randoms()
    },
    // 每页条数
    handleSizeChange (val) {
      this.data.pagesize = val
      console.log(`每页 ${val} 条`)
      this.randoms()
    },
    // 删除员工
    deleteRandoms (data) {
      this.$confirm('此操作将永久删除该题组, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        // 发请求
        await removeRandoms(data)
        this.$message.success('删除成功')
        if (this.list.length === 1 && this.data.page > 1) {
          this.data.page--
        }
        // 刷新列表
        this.randoms()
      })
    },
    // 清除
    clear () {
      this.data.keyword = ''
    },
    // 查询
    handleSearch () {
      // console.log('ok')
      this.data.page = 1
      this.randoms()
    },
    // 打开弹窗
    async showDialog (id) {
      this.dialogVisible = true
      const res = await detail({ id })
      console.log(res)
      this.questionData = res.data
    },
    // 关闭弹窗
    closeDialog () {
      this.dialogVisible = false
      this.isShow = false
    },
    stopPrevent (e) {
      e.preventDefault()
    },
    // 视频框
    videoShow (url) {
      if (url !== '') this.isShow = !this.isShow
    }
  }
}
</script>

<style lang="scss" scoped>
.el-alert {
    width: 100%;
    background-color: #f4f4f5;
    color: #909399;
}
</style>
